<script setup lang="ts">
import { inject, onMounted, ref } from 'vue'
import { getDynamicWallPaperList, getWallPaperList } from '@/api/home'
import type { DynamicWallPaper, WallPaper } from '@/api/home/type'
import SvgIcon from '@/components/icon/SvgIcon.vue'

const tabs = ref([
  { id: '1', name: '精选图片', active: true },
  { id: '2', name: '动态壁纸', active: false },
])

interface WallPaperType {
  id: string
  name: string
  code: string
  cover: string
}
const wallPaperTypeList: WallPaperType[] = [
  {
    id: '1',
    name: '自然',
    code: 'nature',
    cover: './../../../images/nature.png',
  },
  {
    id: '2',
    name: '建筑',
    code: 'architecture',
    cover: './../../../images/architecture.png',
  },
  {
    id: '3',
    name: '动物',
    code: 'animals',
    cover: './../../../images/animal.png',
  },
  {
    id: '4',
    name: '旅行',
    code: 'travel',
    cover: './../../../images/travel.png',
  },
  {
    id: '5',
    name: '美食',
    code: 'food-drink',
    cover: './../../../images/food.png',
  },
  {
    id: '6',
    name: '动漫',
    code: 'anime',
    cover: './../../../images/Anime.png',
  },
  {
    id: '7',
    name: '运动',
    code: 'athletics',
    cover: './../../../images/sport.png',
  },
  {
    id: '8',
    name: '技术',
    code: 'technology',
    cover: './../../../images/technology.png',
  },
  {
    id: '9',
    name: '街景',
    code: 'streetPhotography',
    cover: './../../../images/street.png',
  },
]

const showReturnBtn = ref(false)
const showWallPaperType = ref(true)
const showImgList = ref(false)
const showDynamicWallPaper = ref(false)
const dynamicWallPaperList = ref<DynamicWallPaper[]>([])

const tabClick = (item) => {
  if (item.id == 1) {
    showWallPaperType.value = true
    showDynamicWallPaper.value = false
  }
  if (item.id == 2) {
    getDynamicWallPaperList(null).then((res) => {
      for (let dynamicWallPaper of res.list) {
        dynamicWallPaper.ready = false
        dynamicWallPaper.thumbnailSrc =
          dynamicWallPaper.src +
          '?x-oss-process=video/snapshot,t_0,f_jpg,w_384,h_216,m_fast'
        dynamicWallPaperList.value.push(dynamicWallPaper)
      }
    })

    showReturnBtn.value = false
    showWallPaperType.value = false
    showImgList.value = false
    showDynamicWallPaper.value = true
  }
  for (let element of tabs.value) {
    if (element.id == item.id) {
      element.active = true
    } else {
      element.active = false
    }
  }
}

const wallPaperList = ref<WallPaper[]>([])

const wallPaperTypeClick = (wallPaperType) => {
  showReturnBtn.value = true
  showImgList.value = true
  showWallPaperType.value = false
  getWallPaperList({
    client: 'pc',
    tag: wallPaperType.code,
  }).then((res) => {
    for (let wallPaper of res.list) {
      wallPaper.thumbnailSrc =
        wallPaper.rawSrc + '?imageView2/2/w/384/format/webp'
      wallPaperList.value.push(wallPaper)
    }
  })
}
const getPath = (item) => {
  let url = new URL(item.cover, import.meta.url).href
  return 'url(' + url + ')'
}

const bgUrl = inject('bgUrl')
const dynamicBg = inject('dynamicBg')
const imgClick = (image) => {
  bgUrl.value = `url(${image.rawSrc})`
  dynamicBg.value = ''
}
const returnBtnClick = () => {
  showReturnBtn.value = !showReturnBtn.value
  showWallPaperType.value = !showWallPaperType.value
}

const dynamicWallPaperClick = (item) => {
  dynamicBg.value = item.src
  bgUrl.value = ''
}
</script>

<template>
  <div class="panel">
    <section>
      <p>
        <span
          v-for="item in tabs"
          @click="tabClick(item)"
          :style="{
            backgroundColor: item.active ? 'black' : '',
            color: item.active ? '#fff' : '',
          }"
        >
          {{ item.name }}
        </span>
      </p>
    </section>

    <!--返回按钮-->
    <p
      v-show="showReturnBtn"
      @click="returnBtnClick"
      style="
        display: flex;
        align-items: center;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
      "
    >
      <svg-icon size="16" color="#000" name="left" />
      <span>返回</span>
    </p>

    <!--img类型列表-->
    <section v-show="showWallPaperType">
      <p v-for="item in wallPaperTypeList">
        <span
          :style="{
            backgroundImage: getPath(item),
            backgroundSize: '100% 100%',
            cursor: 'pointer',
          }"
          @click="wallPaperTypeClick(item)"
        >
          {{ item.name }}
        </span>
      </p>
    </section>

    <!--img列表-->
    <section class="image-grid" v-if="showImgList">
      <div
        v-for="(image, index) in wallPaperList"
        class="image-item"
        :key="image.id"
      >
        <el-image
          @click="imgClick(image)"
          :src="image.thumbnailSrc"
          referrerpolicy="no-referrer"
          :lazy="index > 8"
        />
      </div>
    </section>

    <!--动态壁纸列表-->
    <section
      id="dynamicWallpaper"
      class="dynamic-wallpaper"
      v-if="showDynamicWallPaper"
    >
      <p v-for="(item, index) in dynamicWallPaperList">
        <span :id="item.id" @click="dynamicWallPaperClick(item)">
          <el-image
            :src="item.thumbnailSrc"
            referrerpolicy="no-referrer"
            :lazy="index > 8"
          />
        </span>
      </p>
    </section>
  </div>
</template>

<style scoped lang="less">
.panel {
  width: 100%;
  padding-left: 5px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;

  section:first-of-type {
    display: flex;
    justify-content: center;
    p {
      display: flex;
      justify-content: center;
      border-radius: 5px;
      //border: 1px solid black;
      margin-top: @marginTop;
      box-shadow: 5px 5px 5px gray;
      width: 80%;

      span {
        padding: 6px;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  section:nth-of-type(2) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 6px;
    margin-bottom: 7px;
    p {
      display: flex;
      margin-right: 7px;
      margin-left: 7px;
      span {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 40px;
        margin-top: 6px;
        align-items: center;
        color: white;
        font-weight: 600;
        letter-spacing: 2px;
      }
    }
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin-top: 10px;
  }

  .dynamic-wallpaper {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    p {
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
      }
    }
  }
}
</style>
